<template>
  <a-layout-content style="padding: 0 50px">
    <a-layout style="padding: 24px 0; background: #fff; margin-top: 10px">
      <a-layout-sider width="200" style="background: #fff">
        <a-menu
          mode="inline"
          :default-selected-keys="[nowPath]"
          :default-open-keys="['sub1']"
          style="height: 100%"
          @select="sidechange"
        >
          <a-sub-menu key="sub1">
            <span slot="title"><a-icon type="user" />当前订单</span>
            <a-menu-item key="/roomorder"> 订单 </a-menu-item>
            <a-menu-item key="2"> option2 </a-menu-item>
            <a-menu-item key="3"> option3 </a-menu-item>
            <a-menu-item key="4"> option4 </a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub2">
            <span slot="title"><a-icon type="laptop" />未处理订单</span>
            <a-menu-item key="5"> option5 </a-menu-item>
            <a-menu-item key="6"> option6 </a-menu-item>
            <a-menu-item key="7"> option7 </a-menu-item>
            <a-menu-item key="8"> option8 </a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub3">
            <span slot="title"><a-icon type="notification" />已处理订单</span>
            <a-menu-item key="9"> option9 </a-menu-item>
            <a-menu-item key="10"> option10 </a-menu-item>
            <a-menu-item key="11"> option11 </a-menu-item>
            <a-menu-item key="12"> option12 </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
      <a-layout-content :style="{ padding: '0 24px', minHeight: '280px' }">
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
  </a-layout-content>
</template>

<script>
export default {
  data() {
    return {
      nowPath: "/" + this.$route.path.split("/")[1],
    };
  },
  sidechange(event) {
    let paths = "";
    switch (event.key.split("/")[1]) {
      default:
        paths = "roomorder";
        break;
      case "room":
        paths = "room";
        break;
      case "person":
        paths = "person";
        break;
    }
    this.$router.push({ name: paths });
  },
};
</script>

<style lang="scss" scoped></style>
